<template>
  <div class="musicDetails_main" id="musicDetails_main">
    <div class="left_box_loading" v-if="!awemeInfo">
      <div
        style="margin-top: 30px; margin-bottom: 100px"
        v-loading="true"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      ></div>                 
    </div>
    <div class="left_box" v-else>
      <div class="left_info">
        <div class="info_box">
          <el-popover
            placement="right"
            width="200"
            popper-class="big_img"
            :visible-arrow="false"
            trigger="click">
            <img
              :src="awemeInfo.thum_pic"
              class="logo"
              v-if="awemeInfo&&awemeInfo.thum_pic"
              slot="reference"
            />
            <img
              :src="awemeInfo.thum_pic"
              class="logo"
              v-if="awemeInfo&&awemeInfo.thum_pic"
            />
          </el-popover>
          <div>
            <p class="title">#{{ awemeInfo.title }}</p>
          </div>
        </div>
        <div class="bor_bot">
          <div class="commonStyle mar_top">
            <p>作者</p>
            <p
              v-if="awemeInfo && awemeInfo.author_name !=null"
            >{{awemeInfo.author_name}}</p>
            <p v-if="awemeInfo && awemeInfo.author_name ==null">--</p>
          </div>
          <div class="commonStyle">
            <p>时长</p>
            <p class="timeLong">{{ format_time(awemeInfo.duration * 1000) }}</p>
            <!-- <p>{{ format_num(awemeInfo.aweme.total_comment) }}</p> -->
          </div>
          <div class="commonStyle">
            <p class="Mr">使用人数</p>
            <p>{{ format_num(awemeInfo.user_count) }}</p>
          </div>
          <div class="commonStyle">
            <p class="Mr">主推类目</p>
            <p
              class="btn"
              style="width:88px;"
              v-if="awemeInfo.categoryname !='' "
            >{{ awemeInfo.categoryname }}</p>
            <p v-if="awemeInfo.categoryname=='' ">--</p>
          </div>
        </div>
        <button
          class="add_col"
          @click="CancelCollection"
          v-if="awemeInfo.isCollect"
        >已收藏</button>
        <button class="add_col" v-else @click="InsertCollection">添加收藏</button>
      </div>
    </div>
    <div id="collectRoot">
      <div class="rightBox">
        <!-- 数据分析 -->
        <div class="btn_group">
          <button>数据分析</button>
        </div>
        <div class="rig_box">
          <div class="rightBox-content">
            <!-- 内容 -->
            <!-- 每日使用人数趋势图和使用人群行业分布 -->
            <div class="div2">
              <!-- 每日使用人数趋势图 -->
              <div class="div2Item">
                <div class="myTitle">
                  <span></span>每日使用人数趋势图
                </div>
                <div class="lineChartBox">
                  <lineChart
                    :xData="xData1"
                    :series1="yData1"
                    name1="使用人数"
                    v-if="xData1 && xData1.length && yData1"
                  />
                  <div
                    v-loading="loading1"
                    class="loadingwl01"
                    element-loading-text="拼命加载中..."
                    element-loading-spinner="el-icon-loading"
                  ></div>
                  <div v-if="!xData1.length && !loading1" class="lineChartBox">
                    <img src="@/assets/liu/zw.png" />
                    <p>暂无数据</p>
                  </div>
                </div>
              </div>
              <!-- 使用人群行业分布 -->
              <div class="div2Item">
                <div class="myTitle">
                  <span></span>使用人群行业分布
                </div>
                <div class="pieBox">
                  <BigPie
                    :valueData="pieData"
                    v-if="!finishPie && pieData.length != 0"
                  />
                  <div
                    v-loading="finishPie"
                    class="loadingwl01"
                    v-if="finishPie"
                    element-loading-text="拼命加载中..."
                    element-loading-spinner="el-icon-loading"
                  ></div>
                  <div
                    v-if="!finishPie && pieData.length == 0"
                    class="noDataNoticewl"
                  >目前没有可以查看的数据哟~</div>
                </div>
              </div>
            </div>
            <!-- 同款音乐视频 -->
            <p class="Tmusic">
              <span></span> 同款音乐视频
            </p>
            <div class="twoBox">
              <!-- 开始结束时间 -->
              <div class="optionsBox">
                <el-date-picker
                  class="long_time"
                  v-model="liveTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  prefix-icon="el-icon-arrow-down"
                  unlink-panels
                  :clearable="false"
                  :picker-options="pickeroptions"
                  value-format="yyyy-MM-dd"
                  @change="onPick1"
                ></el-date-picker>
              </div>
              <!-- 搜索框 -->
              <!-- <div class="searchBox">
                <el-input
                  v-model="searchInput"
                  placeholder="请输入视频名称关键词搜索"
                  @keyup.enter.native="Search"
                ></el-input>
                <div class="imgBox" @click="Search"></div>
              </div> -->
              <div class="searchBox music_searchBox">
                <el-input
                  type="text"
                  v-model="searchInput"
                  @keyup.enter.native="Search"
                  placeholder="请输入视频名称关键词搜索"
                ></el-input>
                <div class="imgBox" @click="Search"></div>
              </div>              
            </div>
            <!-- 音乐数据 -->
            <div class="zw_box">
              <ul class="musicTop">
                <li class="first_li">视频</li>
                <li class="first_li_1">达人</li>

                <li class="second_li" v-if="sort == 2">
                  发布时间
                  <span>
                    <img src="@/assets/meng/down_up.png" alt />
                  </span>
                </li>
                <li v-else class="second_li" @click="sort_fun(2)">
                  发布时间
                  <span>
                    <img src="@/assets/meng/no_down_up.png" alt />
                  </span>
                </li>

                <li class="third_li" v-if="sort == 1">
                  点赞数
                  <span>
                    <img src="@/assets/meng/down_up.png" alt />
                  </span>
                </li>
                <li class="third_li" v-else @click="sort_fun(1)">
                  点赞数
                  <span>
                    <img src="@/assets/meng/no_down_up.png" alt />
                  </span>
                </li>

                <li class="third_li" v-if="sort == 3">
                  评论数
                  <span>
                    <img src="@/assets/meng/down_up.png" alt />
                  </span>
                </li>
                <li class="third_li" v-else @click="sort_fun(3)">
                  评论数
                  <span>
                    <img src="@/assets/meng/no_down_up.png" alt />
                  </span>
                </li>

                <li class="third_li" v-if="sort == 4">
                  转发数
                  <span>
                    <img src="@/assets/meng/down_up.png" alt />
                  </span>
                </li>
                <li class="third_li" v-else @click="sort_fun(4)">
                  转发数
                  <span>
                    <img src="@/assets/meng/no_down_up.png" alt />
                  </span>
                </li>
              </ul>
              <ul class="details">
                <li v-for="(item, index) in MusicList" :key="index">
                  <div class="video" @click="goVideodetails(item.url)">
                    <div class="ImgBlock" @click="goVideodetails(item.url)">
                      <img :src="item.thumPic" alt />
                      <!-- <img
                      src="@/assets/wang/video/play1.png"
                      alt=""
                      class="ImgPlay"
                      />-->
                    </div>
                    <span @click="goVideodetails(item.url)">
                      {{
                      item.title
                      }}
                    </span>
                  </div>
                  <div class="Talent_show">
                    <img
                      :src="item.logo"
                      alt
                      @click="seeDetails(item.authorId)"
                    />
                    <p
                      class="p1"
                      @click="seeDetails(item.authorId)"
                    >{{ item.nickName }}</p>
                    <p class="p2">抖音号：{{ item.uniqueId }}</p>
                  </div>
                  <div
                    class="Release_time"
                  >{{ timestamp(item.releaseTime, "Y-M-D h:m") }}</div>
                  <div class="three_num">{{ format_num(item.favoriteCount) }}</div>
                  <div class="three_num">{{ format_num(item.commentCount) }}</div>
                  <div class="three_num">{{ format_num(item.shareCount) }}</div>
                </li>
              </ul>
              <div
                v-loading="loadinglist"
                v-if="loadinglist"
                element-loading-text="拼命加载中..."
                element-loading-spinner="el-icon-loading"
                style="height:70px;"
              ></div>
              <div v-if="!MusicList.length && !loadinglist" class="zw">
                <img src="@/assets/liu/zw.png" />
                <p>暂无数据</p>
              </div>
            </div>
            <!-- 分页 -->
            <div class="pageBox" v-if="count > pageSize && !loadinglist">
              <div class="pageBoxSon">
                <el-pagination
                  background
                  layout="prev, pager, next,jumper"
                  :total="count"
                  :page-size="pageSize"
                  :current-page="pageIndex"
                  @current-change="get_data"
                ></el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lineChart from '../component/lineChart.vue';
import BigPie from '@/pages/wang/talent/tdetails/component/BigPie';
// import BigPie from "../../talent/tdetails/component/BigPie.vue";
export default {
  data() {
    return {
      awemeInfo: null, //左侧列表
      musicId: this.$route.query.musicId, // 详情id
      xData1: [], // 折线图x轴
      yData1: [], // 折线图y轴
      pieData: [], // 圆
      yData2: [],
      finishPie: false,
      liveTime: [], // 时间
      searchInput: '', // 搜索框
      sort: 2, // 视频排序类型 1点赞排序 2发布时间排序 3评论数排序 4转发数排序
      pageIndex: 1, //页码
      pageSize: 10, // 每页显示条数
      MusicList: [], // 同款音乐详情列表
      count: null, //总条数
      // 选择时间 不可选的日期
      pickeroptions: {
        disabledDate: time => {
          return (
            time.getTime() < Date.now() - 90 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        }
      },
      loading: false,
      loading1: false,
      loading2: false,
      loadinglist: false
    };
  },
  created() {
    this.liveTime = [
      this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D'),
      this.timestamp(Date.now() / 1000, 'Y-M-D')
    ];
    this.getDetailsData();
    this.getTradeRatio();
    this.getTrend();
    this.getMusicList();
  },
  mounted() {},
  watch: {
    title(n) {
      this.GetTopicAwemes1();
    },
    searchInput(n) {
      if (!n) {
        this.getMusicList();
      }
    }
  },
  components: { lineChart, BigPie },
  methods: {
    // 音乐基本信息
    getDetailsData() {
      this.$axios
        .get('/api/music/info?musicId=' + this.musicId)
        .then(res => {
          if (res.data.code == 0) {
            this.awemeInfo = res.data.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 添加收藏
    InsertCollection() {
      this.$axios
        .post('api/collection/InsertCollection', {
          CollectId: this.musicId,
          Module: 3
        })
        .then(res => {
          if (res.data.code == 0) {
            this.$message({
              message: '收藏成功',
              type: 'success'
            });
            this.awemeInfo.isCollect = 1;
            // this.awemeInfo = [];
            // this.info();
          } else {
            this.$message({
              message: '收藏失败',
              type: 'success'
            });
            this.awemeInfo.isCollect = 0;
          }
        });
    },
    // 取消收藏
    CancelCollection() {
      this.$axios
        .post('/api/collection/CancelCollection', {
          CollectId: this.musicId,
          Module: 3 //模块 1达人 2视频 3音乐 4话题 5商品
        })
        .then(res => {
          if (res.data.code == 0) {
            // this.awemeInfo = [];
            // this.info();
            this.$message({
              message: '取消收藏成功！',
              type: 'success',
              duration: 2000
            });
            this.awemeInfo.isCollect = 0;
          } else {
            this.$message({
              message: '取消收藏失败！',
              type: 'error',
              duration: 2000
            });
            this.awemeInfo.isCollect = 1;
          }
        })
        .catch(err => {
          console.log(err);
          this.$message({
            message: '取消收藏失败！',
            type: 'error',
            duration: 2000
            // offset: '400',
          });
        });
    },
    // 使用人数
    getTradeRatio() {
      this.loading1 = true;
      this.$axios
        .get('/api/music/usernumtrend?musicId=' + this.musicId)
        .then(res => {
          if (res.data.code == 0) {
            let Xdata = res.data.data.dataUnix;
            Xdata.forEach(element => {
              this.xData1.push(this.timestamp(element, 'M/D'));
              return this.xData1;
            });
            this.yData1 = res.data.data.trendData;
            // this.finishChart = true
            this.loading1 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 使用人群行业分布
    getTrend() {
      this.finishPie = true;
      this.$axios
        .get('/api/music/trend?musicId=' + this.musicId)
        .then(res => {
          if (res.data.code == 0) {
            for (var i = res.data.data.length - 1; i > 0; i--) {
              if (res.data.data[i].value == 0) res.data.data.splice(i, 1);
            }
            this.pieData = res.data.data;
            this.finishPie = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 同款音乐列表详情
    getMusicList() {
      this.loadinglist = true;
      this.$axios
        .post('/api/music/awe', {
          MusicId: this.musicId,
          Title: this.searchInput.trim(),
          SortType: this.sort,
          ReleaseTime: this.liveTime[0] + '-' + this.liveTime[1],
          Index: this.pageIndex,
          Size: this.pageSize
        })
        .then(res => {
          if (res.data.code == 0) {
            this.MusicList = res.data.data;
            this.count = res.data.count;
            this.loadinglist = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 分页
    get_data(e) {
      this.pageIndex = e;
      this.MusicList = [];
      this.getMusicList();
    },
    // 表格头部排序
    sort_fun(parm01) {
      switch (parm01) {
        case 1:
          this.sort = 1;
          break;
        case 2:
          this.sort = 2;
          break;
        case 3:
          this.sort = 3;
          break;
        case 4:
          this.sort = 4;
          break;
      }
      this.MusicList = [];
      this.getMusicList();
    },
    // 搜索
    Search() {
      this.pageIndex = 1;
      this.getMusicList();
    },
    onPick1() {
      this.getMusicList();
    },
    // 点击视频或者视频文字跳转到视频详情
    goVideodetails(url) {
      window.open(url, '_blank');
    },

    // 点击头像或达人名字跳转到达人详情
    seeDetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/tdetails/${id}/${0}`
      });
      window.open(router.href, '_blank');
    }
  }
};
</script>

<style lang="less" scoped>
.musicDetails_main {
  margin-left: @margin-num;
  margin-right: @margin-num;
  margin-top: @margin-num;
  overflow: hidden;
  display: flex;
  height: calc(100vh - 94px);
  //   ele
  .el-popover__reference {
    width: 30px;
    height: 30px;
    cursor: pointer;
  }
  .copylink {
    display: inline-block;
    > img {
      width: 30px;
      height: 30px;
      cursor: pointer;
      margin-left: 5px;
    }
  }
  //
  .left_box_loading{
    width: 300px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    border-radius:4px;
    .el-loading-parent--relative{
      width: 100%;
      height: 100px;
    }
  }
  .left_box {
    width: 300px;
    height: 292px;
    background-color: #ffffff;
    border-radius: 4px;
    .left_info {
      width: 300px;
      min-height: 300px;
      background-color: #ffffff;
      border-radius: 4px;
      margin-bottom: 10px;
      padding: 20px;
      box-sizing: border-box;
      text-align: center;
      .info_box {
        text-align: left;
        display: flex;
        .logo {
          width: 50px;
          height: 50px;
          border-radius: 6px;
          margin-right: 10px;
          cursor: pointer;
        }
        .title {
          width: 196px;
          font-size: 16px;
          font-weight: 600;
          color: #222222;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-bottom: 5px;
          //   &:hover {
          //     color: #ff924b;
          //     cursor: pointer;
          //   }
        }
      }
      .commonStyle {
        text-align: left;
        margin-bottom: 15px;
        display: flex;
        > p {
          display: inline-block;
          &:nth-child(1) {
            font-size: 12px;
            color: #888888;
            margin-right: 25px;
          }
          &:nth-child(2) {
            font-size: 13px;
            color: #222222;
            margin-left: 50px;
            width: 144px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
        .Mr {
          margin-right: 0px !important;
        }
        .btn {
          width: 74px;
          height: 26px;
          background-color: #fff7ee;
          border-radius: 4px;
          text-align: center;
          line-height: 26px;
          color: #555 !important;
        }
      }
      .mar_top {
        margin-top: 20px;
      }
      .bor_bot {
        border-bottom: solid 1px #efefef;
      }
      .add_col {
        width: 80px;
        height: 32px;
        border-radius: 4px;
        border: solid 1px #ff924b;
        margin: auto;
        margin-top: 15px;
        font-size: 14px;
        color: #ff924b;
        line-height: 28px;
      }
    }
    .bot_info {
      width: 300px;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 4px;
      box-sizing: border-box;
      .bot_box {
        display: flex;
        .bot_logo {
          width: 51px;
          height: 51px;
          border-radius: 50%;
          margin-right: 10px;
          cursor: pointer;
        }
        > div {
          margin-top: 7px;
          .bot_tit {
            width: 200px;
            font-size: 16px;
            font-weight: 600;
            color: #222222;
            margin-bottom: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &:hover {
              color: #ff924b;
              cursor: pointer;
            }
          }
          .tiktok {
            font-size: 12px;

            color: #888888;
          }
        }
      }
      .total {
        margin-top: 20px;
        > div {
          display: flex;
          &:nth-child(1) {
            margin-bottom: 20px;
          }

          > p {
            align-self: center;
            &:nth-child(1) {
              margin-right: 25px;
              font-size: 12px;
              color: #888888;
            }
            &:nth-child(2) {
              font-size: 13px;
              color: #222222;
            }
          }
        }
      }
    }
  }
  #collectRoot {
    box-sizing: border-box;
    flex: 1;
    height: 100%;
    overflow: hidden;
    // margin-top: @margin-num;
    margin-left: @margin-num;
    // margin-right: @margin-num;
    background-color: #f1f1f1;
    .rightBox {
      width: 100%;
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      height: 100%;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-radius: 6px;
      .btn_group {
        text-align: left;
        .active {
          background-color: #fd7f2c;
          color: #ffffff !important;
        }
        button {
          font-size: 14px;
          color: #fff;
          padding-left: 23px;
          padding-right: 23px;
          height: 40px;
          background-color: #fd7f2c;
          border-radius: 4px;
          margin-right: 7px;
        }
      }
      .rig_box {
        width: 100%;
        height: calc(100% - 50px);
        border-radius: 4px;
        padding: 20px 0 3px;
        margin-top: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background: #fff;
        overflow: hidden;
        .rightBox-content {
          position: relative;
          background-color: #ffffff;
          border-radius: 6px;
          // margin-top: 10px;
          height: calc(100% - 20px);
          // height: 100%;
          overflow: scroll;
          overflow-x: hidden;
          .div2 {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            // margin-top: 20px;
            .div2Item {
              width: 50%;
            }
          }
          .lineChartBox {
            width:100%;
            height: 220px;
          }
          .pieBox {
            // width: 50%;
            height: 220px;
          }
          .myTitle {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 16px;
            color: #222222;
            padding-left: 30px;
            font-weight: 600;
            margin-bottom: 20px;
            span {
              display: inline-block;
              width: 4px !important;
              height: 16px !important;
              background-color: #fd7f2c !important;
              border-radius: 2px;
              vertical-align: middle;
              margin-right: 5px;
            }
          }
          .Tmusic {
            margin-left: 31px;
            line-height: 30px;
            margin-top: 15px;
            color: #222222;
            font-weight: 600;
            letter-spacing: 1px;
            // overflow: hidden;
            span {
              display: inline-block;
              width: 4px !important;
              height: 16px !important;
              background-color: #fd7f2c !important;
              border-radius: 2px;
              vertical-align: middle;
              margin-top: -5px;
            }
          }
          .twoBox {
            display: flex;
            align-items: center;
            width: 100%;
            height: 32px;
            margin: 10px 0px 0px 30px;
            box-sizing: border-box;
            .optionsBox {
              .long_time {
                width: 206px;
                height: 32px;
                background-color: #ffffff !important;
                border-radius: 4px;
                border: solid 1px #e5e5e5;
                .el-range-input {
                  background-color: #fff !important;
                  border: none;
                }
              }
            }
            // .searchBox {
            //   position: relative;
            //   width: 308px;
            //   height: 32px !important;
            //   .el-input /deep/ .el-input__inner {
            //     height: 32px;
            //   }
            //   .imgBox {
            //     width: 38px;
            //     height: 32px;
            //     border-radius: 0px 4px 4px 0px;
            //     position: absolute;
            //     right: 0;
            //     top: 0;
            //     background: url('../../../../assets/wang/talentCompare/search-fu.png')
            //         no-repeat 12px 9px,
            //       #fd7f2c !important;
            //     background-size: 15px 15px !important;
            //     &:hover {
            //       cursor: pointer;
            //     }
            //   }
            // }
            .searchBox {
              width: 308px;
              height: 32px;
              border-radius: 4px;
              overflow: hidden;
              display: flex;
              justify-content: center;
              align-items: center;
              border: 1px solid #e5e5e5;
              overflow: hidden;
              margin-left: 9px;
              .imgBox:hover {
                background: url('../../../../assets/wang/talentCompare/search.png') no-repeat
                    10px 7px,
                  #fff;
                background-size: 15px 15px;
              }
              .imgBox {
                width: 40px;
                height: 30px;
                border-radius: 0px 4px 4px 0px;
                cursor: pointer;
                display: grid;
                place-items: center;
                background: url('../../../../assets/wang/talentCompare/search-nohover.png')
                    no-repeat 10px 7px,
                  #fff;
                background-size: 15px 15px;
                img {
                  width: 15px;
                  height: 15px;
                }
              }
            }
          }
          // 音乐详情
          .musicTop {
            width: 100%;
            height: 48px;
            background-color: #f5f9ff;
            border-radius: 4px 4px 0px 0px;
            margin-top: 10px;
            margin-left: 30px;
            font-weight: 600;
            li {
              font-size: 14px;
              box-sizing: border-box;
              color: #555555;
              float: left;
              line-height: 48px;
              img {
                margin-left: 2px;
                margin-bottom: 3px;
                width: 5px;
                height: 12px;
              }
            }
            .first_li {
              padding-left: 46px;
              width: 30%;
            }
            .first_li_1 {
              padding-left: 46px;
              width: 20%;
            }
            .second_li {
              width: 15%;
              text-align: center;
              &:hover {
                cursor: pointer;
              }
            }
            .third_li {
              width: 11%;
              text-align: center;
              &:hover {
                cursor: pointer;
              }
            }
          }
          .details {
            width: 100%;
            margin-left: 30px;
            li {
              width: 100%;
              height: 77px;
              display: flex;
              border-bottom: 1px solid #efefef;
              .video {
                width: 30%;
                height: 100%;
                font-weight: 600;
                display: flex;
                align-items: center;
                // overflow: hidden;
                .ImgBlock {
                  position: relative;
                  &:hover {
                    cursor: pointer;
                  }
                  &:hover .ImgPlay {
                    display: block;
                  }
                  img {
                    width: 50px;
                    height: 50px;
                    float: left;
                    margin: 0 8px 0px 35px;
                    border-radius: 6px;
                    &:hover .ImgPlay {
                      display: block;
                      cursor: pointer;
                    }
                  }
                  .ImgPlay {
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    top: 17px;
                    left: 15px;
                    display: none;
                  }
                }

                span {
                  font-size: 14px;
                  color: #222222;
                  text-overflow: -o-ellipsis-lastline;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  line-clamp: 2;
                  -webkit-box-orient: vertical;
                  &:hover {
                    color: #fd7f2c;
                    cursor: pointer;
                  }
                }
              }
              .Talent_show {
                width: 20%;
                img {
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  float: left;
                  margin: 11px 5px 0px 35px;
                  &:hover {
                    cursor: pointer;
                  }
                }
                p {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
                .p1 {
                  color: #222222;
                  font-size: 14px;
                  margin-top: 18px;
                  font-weight: 600;
                  &:hover {
                    cursor: pointer;
                    color: #fd7f2c;
                  }
                }
                .p2 {
                  color: #888888;
                  font-size: 13px;
                }
              }
              .Release_time {
                width: 15%;
                text-align: center;
                // line-height: 72px;
                margin-top: 26px;
              }
              .three_num {
                width: 11%;
                text-align: center;
                line-height: 72px;
              }
            }
          }
          .loading {
            position: absolute;
            top: 400px;
            // left: 100px;
          }
          .zw {
            width: 218px;
            height: 175px;
            margin: 0 auto;

            margin-top: 190px;
          }
          // 分页
          .pageBox {
            width: 100%;
            height: 30px;
            .pageBoxSon {
              width: 38%;
              margin: 30px auto 0px auto;
              // /deep/ .el-pager li:hover {
              //   color: #fd7f2c;
              // }
            }
          }
        }
      }
    }
    .zw_box {
      position: relative;
    }
    // .rig_box {
    //   width: 100%;
    //   height: calc(100% - 50px);
    //   border-radius: 4px;
    //   padding: 20px 0px 3px 0px;
    //   margin-top: 10px;
    //   box-sizing: border-box;
    //   background: #fff;
    //   -webkit-box-sizing: border-box;
    //   overflow: hidden;
    // }
  }
}
</style>
